@import "tools.scss";
@mixin typeArea() {
	width: 1200px;
	height: 100%;
	margin: 0 auto;
}

body{
  font: 12px/22px "Helvetica Neue", "Arial", "PingFang SC", "Microsoft Yahei","SimSun",sans-serif;
  background: #fff;
  color: #333;
  overflow-x: hidden;
  overflow-y: auto;
}

.tool{
	width: 100%;
	// background-color: #f00;
	.tool-in{
		@include typeArea();
		// background-color: #f0f;
		li{
			color: #6c6c6c;
			line-height: 30px;
			height: 30px;	
		}
		.bdr{
			border-right: 1px solid #6c6c6c !important;
		}
		.bdl{
			border-left: 1px solid #6c6c6c !important;
		}
		a{
			padding:0 5px;
			color: #6c6c6c;
			&:hover{
				color: #f60;
			}
		}
		.tool-left{
			display: flex;
			justify-content: left;
			li{
				&:nth-child(1){
					border-left: 1px solid transparent;
					border-right: 1px solid transparent;
					i{
						display: inline-block;
						width: 17px;
						height: 17px;
						background: url("/asset/img/icons.png") no-repeat 0 -70px;
						vertical-align: middle;
					}
					b{
						margin-left:5px;	
					}
					a{
						padding-left: 0;
					}
					div{
						width: 360px;
						height: 380px;
						border: 1px solid #ccc;
						padding: 10px;
						box-sizing: border-box;
						position: absolute;
						left: -1px;
						top: 30px;
						display: none;
						overflow: hidden;
						dl{
							line-height: 22px;
							width: 360px;
							dt{
								width: 40px;
							}
							dd{
								margin-bottom: 5px;
								width: 300px;
								a{
									white-space: nowrap;
								}
							}
						}
					}
					&.active{
						background-color: #fff;
						border-left: 1px solid #ccc;
						border-right: 1px solid #ccc;
						position: relative;
						>a{
							color:#e0e;	
						}
						i{
							background-position: -18px -70px;	
						}
						&::after{
							content: "";
							width: 100%;
							height: 1px;
							background-color: #ff0;
							position: absolute;
							left: 0;
							top: 30px;
						}
					}
				}
			}
		}
		.tool-right{
			margin-top: 8px;
			display: flex;
			justify-content: left;
			align-items: center;
			li{
				// padding: 0 5px;
				// padding-top: 10px;
				height: 14px;
				line-height: 14px;
				
				&:nth-child(1){
					position: relative;
					padding: 0 15px;
					border-left: 1px solid transparent;
					border-right: 1px solid transparent;
					position: relative;
					&:hover{
						background-color: #fff;
						border-left: 1px solid #ccc;
						border-right: 1px solid #ccc;
						i{
							transform: rotateZ(180deg) translateY(5px);
						}
						div{
							display: block;
							width: 100%+2;
							border-left: 1px solid #ccc;
							border-right: 1px solid #ccc;
							border-bottom: 1px solid #ccc;
							padding: 5px 0 5px 15px;
							box-sizing: border-box;
							position: absolute;
							left: -1px;
							top: 30px;
						}
					}
					i{
						@include triangle(Down,3px,#6c6c6c);
						@include vCenter();
						right: 5px;
					}
					div{
						display: none;
					}
				}
				&.tip{
					i{
						display: inline-block;
						width: 17px;
						height: 17px;
						background: url("/asset/img/icons.png") no-repeat -20px -90px;
						vertical-align: middle;
					}
				}
				&.tip_more{
					position: relative;
					border-left: 1px solid transparent;
					border-right: 1px solid transparent;
					&:hover{
						border-left: 1px solid #6c6c6c;
						border-right: 1px solid #6c6c6c;
						&::after{
							content: "";
							width: 100%;
							height: 1px;
							background-color: #fff;
							position: absolute;
							left: 0;
							top: 30px;
						}
					}
					div{
						display: none;
						position: absolute;
						left: -1px;
						top: 30px;
						border: 1px solid #000;
						img{
							vertical-align: middle;
							padding: 5px;
						}
					}
					&:hover{
						div{
							display: block;
						}
					}
				}
				&.weixin{
					padding: 0 3px 0 6px;
				}
				&.xiaochengxu{
					i{
						background-position: -420px -320px;
					}
				}
				&.sina{
					i{
						background-position: -20px -110px;
					}
				}
				&.tel{
					i{
						margin: 5px;
						background-position: 0 -130px;
					}
				}
				&.phone{
					padding-right: 7px;
					position: relative;
					i{
						background-position: 0 -150px;
					}
					b{
						@include triangle(Down,3px,#6c6c6c);
						@include vCenter();
						right: 3px;
					}
					div{
						top: 30px;
						right: 0;
						width: 300px;
					}
				}
			}
		}
	}
}